<template>
  <div class="container">
    <div class="select-wrap">
      <Input prefix="ios-search" placeholder="输入 PR / PO / PI 查找" style="width: 348px" />

      <Button class="search-btn" sieze="" type="primary">搜索</Button>
    </div>

    <div class="table-wrap">
      <div class="table">
        <div class="table-header">
          <Row>
            <Col span="7">
              <div class="th">预演包裹信息</div>
            </Col>
            <Col span="3">
              <div class="th">意向线路</div>
            </Col>
            <Col span="2">
              <div class="th">重量(g)</div>
            </Col>
            <Col span="3">
              <div class="th">尺寸(cm)</div>
            </Col>
            <Col span="2">
              <div class="th">增值</div>
            </Col>
            <Col span="3">
              <div class="th">
                <Dropdown>
                  <div class="all">
                    全部
                    <Icon type="ios-arrow-down"></Icon>
                  </div>
                  <DropdownMenu slot="list">
                    <DropdownItem>驴打滚</DropdownItem>
                    <DropdownItem>炸酱面</DropdownItem>
                    <DropdownItem disabled>豆汁儿</DropdownItem>
                    <DropdownItem>冰糖葫芦</DropdownItem>
                    <DropdownItem divided>北京烤鸭</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
            </Col>
            <Col span="2">
              <div class="th">操作</div>
            </Col>
          </Row>
        </div>
        <div class="table-content">
          <div class="table-tr" v-for="i in 20">
            <div class="table-body">
              <Row>
                <Col span="7">
                  <div class="td td-commodity">
                    <div class="commodity-info">
                      <div class="info">
                        <div class="commodity-left">
                          <img class="image" src="@/assets/images/login/banner.jpg" alt="">
                        </div>
                        <div class="commodity-content">
                          <div class="title">预演编号：HHEWR99777E</div>
                          <div class="intro">提交时间：2023/12/12 12:23:23</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col span="3">
                  <div class="td">
                    加拿大专线-F
                  </div>
                </Col>
                <Col span="2">
                  <div class="td">
                   20g
                  </div>
                </Col>
                <Col span="3">
                  <div class="td">
                    12*23*234
                  </div>
                </Col>
                <Col span="2">
                  <div class="td type-list">
                     <div class="type-item">防潮熟练代</div>
                    <div class="type-item">防潮熟练代</div>
                  </div>
                </Col>
                <Col span="3">
                  <div class="td">
                    <Tooltip content="Top Left text" placement="top-start">
                      未处理 <span class="iconfont icon-bangzhu"></span>
                    </Tooltip>
                  </div>
                </Col>
                <Col span="2">
                  <div class="td pay">
                    <div class="pay-date">71:59:18</div>
                    <Button class="pay-btn" long size="small" type="primary">去支付</Button>
                    <div class="cal-btn">
                      取消
                    </div>
                    <div class="info">包裹详情</div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "order",
  data() {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .select-wrap {

    .search-btn {
      margin-left: 16px;
    }
  }
  .table-wrap {
    margin-top: 32px;
    .table {
      &-header {
        padding: 12px;
        background: @t-table-header-bg;
        .th {
          padding-left: 16px;
          color: @t-title-color;
          font-size: 14px;
          font-weight: 600;
          .all {
            cursor: pointer;
          }
        }
      }
      &-content {
        border-top: 1px solid @t-table-border-color;
        .table-tr {
          padding: 13px;
          border-bottom: 1px solid @t-table-border-color;
          &:hover {
            background: rgba(235,247,255,0.4);
          }
          .table-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              display: flex;
              align-items: center;
              color: @t-label-color;
              font-size: 14px;
              .date {
                margin: 0 12px;
              }
            }
            .delete {
              cursor: pointer;
              color: @primary-color;
              font-size: 14px;
            }
            .box {
              display: flex;
              align-items: center;
              .icon {
                display: block;
                width: 16px;
                margin-left: 12px;
              }
              .text {
                margin-left: 4px;
                color: @t-label-color;
                font-size: 14px;
              }
            }
          }
          .table-body {
            margin-top: 16px;
            color: @t-text-color;
            font-size: 12px;
            .td {
              padding-left: 16px;
              .btn {
                cursor: pointer;
                color: @primary-color;
                font-size: 14px;
              }
            }
            .order-info {
              &:hover {
                cursor: pointer;
                color: @primary-color;
              }
            }
            .td-commodity {
              padding-left: 0;
              .tag {
                display: block;
                margin-left: 116px;
                font-size: 14px;
                font-weight: 500;
                color: @t-title-color;

                .iconfont {
                  font-size: 14px;
                  color: @t-title-color;
                }
              }
              .remark {
                display: block;
                cursor: pointer;
                margin-left: 116px;
                font-size: 14px;
              }
            }
            .type-list {
              display: block;
              .type-item {
                display: inline-block;
                padding: 4px;
                margin-top: 4px;
                color: @t-text-color;
                font-size: 12px;
                background: #F5F5F5;
                border-radius: 2px 2px 2px 2px;
                opacity: 1;
                &:first-child {
                  margin-top: 0;
                }
              }
            }
            .edit {
              cursor: pointer;
            }
            .iconfont {
              color: @t-text-color;
              font-size: 14px;
            }
            .commodity-info {
              display: flex;
              align-items: center;
              .info {
                display: flex;
                .commodity-left {
                  .image {
                    display: block;
                    width: 80px;
                    height: 80px;
                    border-radius: 4px 4px 4px 4px;
                  }
                }
                .commodity-content {
                  font-size: 12px;
                  margin-left: 12px;
                  .title {
                    color: @t-title-color;
                    font-weight: 500;
                  }
                  .intro {
                    margin-top: 4px;
                    margin-bottom: 8px;
                    color: @t-text-color;
                    white-space: pre-line; /*允许换行*/
                    overflow: hidden;
                    text-overflow: ellipsis; /*省略号*/
                    display: -webkit-box;
                    -webkit-box-orient: vertical; /*行向垂直排列*/
                    -webkit-line-clamp: 2; //*限制2
                  }
                }
              }
            }
            .pay {
              .pay-date {
                color: @primary-color;
              }
              .cal-btn {
                margin: 12px 0;
                cursor: pointer;
                font-size: 12px;
                color: @primary-color
              }
              .info {
                cursor: pointer;
                color: @t-title-color;
              }
            }
          }
        }
      }
    }
  }
}
</style>